@import 'color';

$left: 1.2rem;
$naviWidth: 45vw;
$naviWidth2: 40vw;

div,
pre {
  font-family: $songti;
}
img {
  display: block;
}

html {
  font-size: 25px;

  @media only screen and (min-width: 301px) {
    font-size: 50px !important;
  }

  //@media only screen and (min-width: 401px){
  //  font-size: 50px !important;
  //}
  //
  //@media only screen and (min-width: 428px){
  //  font-size: 50px !important;
  //}
  //
  //@media only screen and (min-width: 481px){
  //  font-size: 50px !important;
  //}
  //@media only screen and (min-width: 569px){
  //  font-size: 50px !important;
  //}
  //@media only screen and (min-width: 641px){
  //  font-size: 50px !important;
  //}
  @media only screen and (min-width: 1200px) {
    font-size: 60px !important;
  }

  @media only screen and (min-width: 1600px) {
    font-size: 83.5px !important;
  }
  @media only screen and (min-width: 2000px) {
    font-size: 100px !important;
  }
}

body {
  //overflow-x: hidden;
  overflow-y: visible;
  margin: 0 0;
  left: 0;
  top: 0;
}

/*=======特殊按钮效果=======*/

$btn_w: 2;
$btn_h: 0.6;
.hoverButton,
.hoverButtonB {
  width: #{$btn_w}rem;
  height: #{$btn_h}rem;
  transition: color 2s;
  line-height: #{$btn_h}rem;
  text-align: center;
  color: #fff;
  cursor: pointer;
  font-size: 0.2rem;
}

.hoverButtonB {
  color: #111;
}

.hoverButton:before,
.hoverButtonB:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: calc(#{$btn_w}rem + 2px);
  height: calc(#{$btn_h}rem + 2px);
  background: #fff;
  text-align: center;
  z-index: -2;
  transition: opacity 1s;
  opacity: 0;
}

.hoverButtonB:before {
  background: #666;
}

.hoverButton:hover {
  color: #000;
}

.hoverButtonB:hover {
  color: #fff;
}

.hoverButton:hover:before,
.hoverButtonB:hover:before {
  opacity: 1;
}

.hoverButton:after,
.hoverButtonB:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: #{$btn_w}rem;
  height: #{$btn_h}rem;
  border: solid #fff 1px;
}

.hoverButtonB:after {
  border: solid #ccc 1px;
}

/*------特殊按钮End------*/

/*========menu动态效果========*/
$hum_h: 0.07;
$hum_w: 0.25;

.Menu_link {
  display: block;
  position: relative;
  width: #{$left};
  height: calc(#{$left} + 5px);
  cursor: pointer;
  border-bottom: 1px solid #f5f5f5;
}

@media screen and (min-width: 600px) {
  .Menu_hamburger:before {
    top: #{$hum_h}rem;
  }

  .Menu_hamburger:after {
    top: #{$hum_h}rem;
  }

  .Menu_hamburger,
  .Menu_hamburger:after,
  .Menu_hamburger:before {
    content: '';
    position: absolute;
    width: #{$hum_w}rem;
    height: 2px;
    background-color: #000;
  }

  .Menu_hamburger.Menu_init_animateIn:before {
    animation: Anti_Menu_topHam 0.8s ease-in-out forwards;
  }

  .Menu_hamburger.Menu_init_animateIn:after {
    animation: Anti_Menu_bottomHam 0.8s ease-in-out forwards;
  }

  .Menu_init_animateIn {
    animation: Anti_Menu_middleHam 0.8s ease-in-out forwards;
  }
}

@media screen and (max-width: 780px) {
  .Menu_link {
    position: fixed;
    right: 10px;
    top: 10px;
    width: 40px;
    height: 40px;
    background-color: #000;
    opacity: 0.6;
    border-bottom: 0px solid #f5f5f5;
  }

  .Menu_hamburger:before {
    top: -4px;
  }

  .Menu_hamburger:after {
    top: 4px;
  }

  .Menu_hamburger,
  .Menu_hamburger:after,
  .Menu_hamburger:before {
    content: '';
    position: absolute;
    width: 18px;
    height: 2px;
    background-color: #fff;
  }
}

@keyframes Anti_Menu_middleHam {
  0% {
    background-color: transparent;
  }
  50% {
    background-color: transparent;
  }
  to {
    background-color: #000;
  }
}

@keyframes Anti_Menu_bottomHam {
  0% {
    top: 0;
    transform: rotate(-45deg);
  }
  50% {
    top: 0;
    transform: rotate(0deg);
  }
  100% {
    top: #{$hum_h}rem;
    transform: rotate(0deg);
  }
}

@keyframes Anti_Menu_topHam {
  0% {
    top: 0;
    transform: rotate(45deg);
  }
  50% {
    top: 0;
    transform: rotate(0deg);
  }
  100% {
    top: -#{$hum_h}rem;
    transform: rotate(0deg);
  }
}

.Menu_hamburger.Menu_animateIn:before {
  -webkit-animation: Menu_topHam 0.4s ease-in-out forwards;
  animation: Menu_topHam 0.4s ease-in-out forwards;
}

.Menu_hamburger.Menu_animateIn:after {
  -webkit-animation: Menu_bottomHam 0.4s ease-in-out forwards;
  animation: Menu_bottomHam 0.4s ease-in-out forwards;
}

@keyframes Menu_topHam {
  0% {
    top: 0;
    opacity: 1;
  }
  100% {
    top: 0;
    opacity: 1;
    transform: rotate(45deg);
  }
}

@keyframes Menu_middleHam {
  30% {
    background-color: #000;
  }
  50% {
    background-color: transparent;
  }
  to {
    background-color: transparent;
  }
}

@keyframes Menu_bottomHam {
  0% {
    top: 0;
    opacity: 1;
  }
  100% {
    top: 0;
    opacity: 1;
    transform: rotate(-45deg);
  }
}

.Menu_animateIn {
  -webkit-animation: Menu_middleHam 0.4s ease-in-out forwards;
  animation: Menu_middleHam 0.4s ease-in-out forwards;
  animation-name: Menu_middleHam;
  animation-duration: 0.4s;
  animation-timing-function: ease-in-out;
  animation-delay: initial;
  animation-iteration-count: initial;
  animation-direction: initial;
  animation-fill-mode: forwards;
  animation-play-state: initial;
}

.Menu_hamburger {
  display: block;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

/*========menu动态效果END========*/
/*========图形========*/

.dark_red {
  background-color: #c0a490;
  color: #c0a490;
}

.dark_ink {
  color: $darkInk;
}

.light_gray {
  color: $lightGray;
}

.light_brown {
  color: $darkBrown;
}

.blue2yellow {
  animation: blue_yellow 2s forwards;
}

@keyframes blue_yellow {
  from {
    background-color: #e9f1f6;
  }
  to {
    background-color: #fff;
  }
}

.yellow2blue {
  animation: yellow_blue 2s forwards;
}

@keyframes yellow_blue {
  from {
    background-color: #fff;
  }
  to {
    background-color: #e9f1f6;
  }
}

.bf_3 {
  animation: change_red 2s forwards;
}

@keyframes change_red {
  from {
    background-color: #cff8f3;
  }
  to {
    background-color: #e9f1f6;
  }
}

.font10 {
  font-size: 0.2rem;
}

.font12 {
  font-size: 0.3rem;
}

.font14 {
  font-size: 0.4rem;
}

.font16 {
  font-size: 0.5rem;
}

.font18 {
  font-size: 0.6rem;
}

.font20 {
  font-size: 0.7rem;
}

.font22 {
  font-size: 0.8rem;
}

.font24 {
  font-size: 0.9rem;
}

.font26 {
  font-size: 1rem;
}

.font28 {
  font-size: 1.1rem;
}

.font30 {
  font-size: 1.2rem;
}

.font36 {
  font-size: 1.5rem;
}

.v_line {
  position: relative;
  width: 1px;
  left: 50%;
  height: 80%;
}

.line {
  width: 0.5rem;
  top: 1.5rem;
  left: 0;
  border-top: 1px solid;
}

/*--------图形End--------*/
/*========字体========*/

.title1 {
  color: #484d51;
  font-family: $songti;
  font-size: 0.7rem;
}

.title2 {
  color: #cab2a1;
  font-family: $songti;
  font-size: 0.3rem;
}

.title3 {
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
    'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
  font-size: 0.8rem;
  font-weight: bold;
}

.clickable {
  transition: opacity 0.5s;
  cursor: pointer;
}

.clickable:hover {
  opacity: 0.5;
}

.scalable {
  transition: all 1s;
}

.scalable:hover {
  transform: scale(1.1);
}

.songti {
  //font-family: 'STSong', 宋体, sans-serif;
  font-family: $songti;
}

.yahei {
  font-family: $yahei;
}

.content1 {
  color: #4a4f53;
  font-size: 0.18rem;
}

.content2 {
  color: $ContentColor;
  font-size: 0.3rem;
}

.text {
  line-height: 1.75;
}

.bold {
  font-weight: bold;
}

.tail {
  position: relative;
  width: 100%;
  height: 15vh;
  background: #f6f7f8;
  color: $lightGray;
  font-size: 0.25rem;
  div {
    position: absolute;
    top: 7vh;
    left: 6vw;
  }

  div > span {
    @media screen and (max-width: 780px) {
      display: block;
    }
  }

  .icp {
    margin-left: 5vw;
    @media screen and (max-width: 780px) {
      margin-left: 0;
    }
  }
}

$font-size: 0.3rem;
$line-height: 1.4;
$lines-to-show: 2;

.ellipsis {
  display: block; /* Fallback for non-webkit */
  display: -webkit-box;
  max-width: 300px;
  height: $font-size * $line-height * $lines-to-show; /* Fallback for non-webkit */
  font-size: $font-size;
  line-height: $line-height;
  -webkit-line-clamp: $lines-to-show;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*========浮现效果=====*/
.fadeIn {
  animation: fadeIn 1s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translate(0, 1rem);
  }
  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}

/*-------浮现效果End------*/

.wrap-img {
  width: 100%;
  height: 100%;
  border-radius: 4px;
  border: 1px solid #f0f0f0;
}

.mask:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.3;
  background: #000;
}

/*==========Logo===========*/
.logo {
  margin-left: 48px;
  margin-top: 38px;
  font-size: 0.5rem;
  font-weight: bold;
  font-family: $songti;
  animation: logo_anim 2s ease-in-out forwards;
  visibility: hidden;
}

/*
.logowrap {
  z-index: 20;
  position: fixed;
  left: 70px;
  top: 0;
  color: #FFF;
  .l1:before {
    content: 'Open';
    position: absolute;
    left: 0.2rem;
    opacity: 1;
    animation: logo_hide 2s both;
    animation-delay: 1s;
  }
  .l2:before {
    content: 'Water';
    position: absolute;
    left: 2.5rem;
    opacity: 1;
    animation: logo_hide 2s both;
    animation-delay: 2s;
  }
  .l1:after {
    content: '开水';
    position: absolute;
    left: 0.2rem;
    opacity: 1;
    width: 4rem;
    animation: logo_show 2s both;
    animation-delay: 2s;
  }
  .l2:after {
    content: '科技';
    position: absolute;
    left: 2.5rem;
    width: 4rem;
    opacity: 1;
    animation: logo_show 2s both;
    animation-delay: 3s;
  }
  .l1, .l2 {
    animation: logo_gone 2s infinite both;
    animation-delay: 5s;
  }
}
*/

.logowrap {
  z-index: 30;
  position: fixed;
  left: 1.5rem;
  top: 0;
  cursor: pointer;
  width: 1rem;
  //height: .9rem;
  height: 1.2rem;
  background: url('/static/image/logo.png') no-repeat;
  background-size: 98% 98%;
  //transform: rotate(10deg);
  //animation: vanish 6s forwards;
  @media screen and (max-width: 780px) {
    left: 6vw;
    width: 0.9rem;
    height: 1rem;
  }
}

@keyframes vanish {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 0.4;
    transform: rotate(135deg);
  }
  50% {
    transform: rotate(45deg);
  }
  80% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: scale(0.1);
  }
}

@keyframes logo_gone {
  from {
    opacity: 1;
  }
  20% {
    opacity: 0.5;
  }
  to {
    opacity: 1;
  }
}

@keyframes logo_show {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes logo_hide {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes logo_anim {
  from {
    opacity: 0.2;
  }
  to {
    opacity: 1;
  }
}

/*-------Logo End------*/
.menuPanel {
  margin-left: 48px;
  margin-top: 3rem;

  .back:before {
    position: relative;
    font-size: 0.42rem;
    color: white;
  }
  .pointer {
    margin-left: -48px;
    position: relative;
    float: left;
    left: 0;
    top: 0;
    height: 0.6rem;
    width: 2px;
    background: #c0a490;
  }

  @media screen and (max-width: 780px) {
    margin-left: 20vw;
  }
}

.naviItem div,
.naviItem2 div {
  margin-top: 0.4rem;
  font-family: 'Microsoft YaHei', 微软雅黑, serif;
  font-weight: 500;
  font-size: 0.45rem;
  cursor: pointer;

  @media screen and (max-width: 780px) {
    font-size: 25px;
  }
}

.naviItem2 {
  font-size: 0.6rem;
  color: #fff;
}

.naviItem2:hover {
  color: #c0a490;
}

.naviItem:hover {
  color: #999;
}

.selected {
  color: #ccc;
}

.naviMenu,
.naviMenu2 {
  position: fixed;
  top: 0;
  margin-top: 0;
  margin-left: 0;
  left: $left;
  width: #{$naviWidth};
  height: 100%;
  border-left: solid 0.5px #ccc;
  background-color: #fefefe;
  z-index: 50;
}

.navi {
  position: fixed;
  top: 0;
  left: 0;
  margin-top: 0;
  margin-left: 0;
  width: $left;
  height: 100%;
  border-right: solid 1px #f5f5f5;
  background-color: #fefefe;
  z-index: 80;
}

.mainPanel {
  position: relative;
  left: $left;
  top: 0;
  margin: 0 0;
  width: calc(100% - #{$left});
  @media screen and(max-width: 780px) {
    width: 100vw;
  }
  height: auto;
}
.mainPanel .article iframe {
  width: calc(100% - #{$left});
  @media screen and (max-width: 780px) {
    width: 100%;
  }
}

@keyframes nshow {
  from {
    width: 0;
  }
  to {
    width: #{$naviWidth};
  }
}

@keyframes nshow2 {
  from {
    width: 0;
  }
  to {
    width: #{$naviWidth2};
  }
}

@media screen and (max-width: 780px) {
  .navi {
    width: 0;
  }
  .mainPanel {
    left: 0;
  }
  .naviMenu,
  .naviMenu2 {
    left: 0;
    width: 100vw;
  }

  @keyframes nshow {
    from {
      width: 0;
    }
    to {
      width: 100vw;
    }
  }

  @keyframes nshow2 {
    from {
      width: 0;
    }
    to {
      width: 100vw;
    }
  }
}

.naviMenu2 {
  background-color: #484d51;
  width: #{$naviWidth2};
}

.naviShow {
  animation: nshow 0.5s;
}

.naviShow2 {
  animation: nshow2 0.5s forwards;
}

.naviHide {
  animation: nhide 0.5s 1s both;
}

.menuShow {
  animation: mshow 1s;
  animation-fill-mode: both;
}

@keyframes mshow {
  0% {
    opacity: 0;
    transform: translate(-9rem);
  }
  60% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
    transform: translate(0px);
  }
}

@keyframes nhide {
  from {
    width: #{$naviWidth};
  }
  to {
    width: 0;
  }
}
